<!-- eslint-disable vue/valid-v-slot -->
<template>
  <div class="main-container">
    <TableBody>
      <template #header>
        <TableHeader ref="tableHeaderRef" :show-filter="false">
          <template #search-content>
            <a-form ref="serchForm" :model="form" :style="{ width: '100%' }">
              <a-row :gutter="24">
                <a-col :span="4">
                  <a-form-item field="addCard" hide-label>
                    <a-input-group style="width: 100%">
                      <a-select
                        style="width: 50%"
                        @change="typeFn"
                        v-model="type"
                        placeholder="first"
                      >
                        <a-option v-for="item in typeLists" :key="item.name" :value="item.value">{{
                          item.name
                        }}</a-option>
                      </a-select>
                      <a-input style="width: 50%" v-model="typeText" placeholder="请输入搜索条件"
                        ><template #suffix>
                          <icon-plus @click="open(0)" style="cursor: pointer" /> </template
                      ></a-input>
                    </a-input-group>
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="card" hide-label>
                    <a-input v-model="form.cards" placeholder="请输入卡号" allow-clear
                      ><template #suffix>
                        <icon-plus @click="open(1)" style="cursor: pointer" /> </template
                    ></a-input>
                  </a-form-item>
                </a-col>
                <!-- <a-col :span="4">
                  <a-form-item field="direct" hide-label>
                    <a-select v-model="form.direct" allow-clear placeholder="请选择卡板类型">
                      <a-option :value="1">所有订单</a-option>
                      <a-option :value="0">直属订单</a-option>
                    </a-select>
                  </a-form-item>
                </a-col> -->
                <a-col :span="4">
                  <a-form-item field="userIds" hide-label>
                    <a-select
                      v-model="form.userIds"
                      placeholder="请选择客户"
                      multiple
                      :max-tag-count="1"
                      allow-clear
                      allow-search
                      :options="userList"
                      :virtual-list-props="{ height: 200 }"
                    />
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="seriesIds" hide-label>
                    <a-select
                      v-model="form.seriesIds"
                      multiple
                      :max-tag-count="1"
                      placeholder="请选择系列"
                      allow-clear
                      allow-search
                    >
                      <a-option v-for="item in series" :key="item.id" :value="item.id">{{
                        item.showName
                      }}</a-option>
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="setMealIds" hide-label>
                    <a-select
                      v-model="form.setMealIds"
                      placeholder="请选择套餐"
                      multiple
                      :max-tag-count="1"
                      allow-clear
                      allow-search
                    >
                      <a-option v-for="item in meal" :key="item.id" :value="item.id">{{
                        item.showName
                      }}</a-option>
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="setMealTypes" hide-label>
                    <a-select
                      v-model="form.setMealTypes"
                      placeholder="请选择套餐类型"
                      multiple
                      :max-tag-count="1"
                      allow-clear
                    >
                      <a-option value="0">无限叠加</a-option>
                      <a-option value="1">基础套餐</a-option>
                      <a-option value="2">叠加包</a-option>
                      <!-- <a-option value="3">体验包</a-option> -->
                    </a-select>
                  </a-form-item>
                </a-col>
              </a-row>
              <a-row :class="show == false ? 'hide' : ''" :gutter="24">
                <a-col :span="4">
                  <a-form-item field="operators" hide-label>
                    <a-select
                      v-model="form.operators"
                      placeholder="请选择运营商"
                      multiple
                      :max-tag-count="1"
                      allow-clear
                    >
                      <a-option :value="0">中国移动</a-option>
                      <a-option :value="1">中国联通</a-option>
                      <a-option :value="2">中国电信</a-option>
                      <a-option :value="3">中国广电</a-option>
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="payTypes" hide-label>
                    <a-select
                      v-model="form.payTypes"
                      placeholder="请选择充值途径"
                      multiple
                      :max-tag-count="1"
                      allow-clear
                    >
                      <a-option :value="0">余额</a-option>
                      <a-option :value="1">支付宝</a-option>
                      <a-option :value="2">微信</a-option>
                      <a-option :value="3">接口</a-option>
                      <a-option :value="4">批量</a-option>
                      <a-option :value="5">赠送</a-option>
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="effectives" hide-label>
                    <a-select
                      v-model="form.effectives"
                      multiple
                      :max-tag-count="1"
                      placeholder="请选择订单时间"
                      allow-clear
                    >
                      <a-option :value="0">立即生效</a-option>
                      <a-option :value="1">本月生效</a-option>
                      <a-option :value="2">次月生效</a-option>
                      <a-option :value="3">月底顺延</a-option>
                      <a-option :value="4">跨月顺延</a-option>
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="firstCharge" hide-label>
                    <a-select v-model="form.firstCharge" allow-clear placeholder="请选择充值类型">
                      <a-option :value="1">首充 </a-option>
                      <a-option :value="0">续充</a-option>
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="states" hide-label>
                    <a-select
                      v-model="form.states"
                      placeholder="请选择订单状态"
                      multiple
                      :max-tag-count="1"
                      allow-clear
                    >
                      <a-option :value="0">等待</a-option>
                      <a-option :value="1">进行</a-option>
                      <a-option :value="2">成功</a-option>
                      <a-option :value="4">退款</a-option>
                      <a-option :value="3">失败</a-option>
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="addFlowRefreshTime" hide-label>
                    <a-date-picker
                      style="width: 100%"
                      v-model="form.addTime"
                      show-time
                      placeholder="请选择开始充值时间"
                      :time-picker-props="{ defaultValue: '12:00:00' }"
                      format="YYYY-MM-DD HH:mm:ss"
                      allow-clear
                      :shortcuts="[
                        {
                          label: '今日',
                          value: () => (
                            (form.addTime = $dayjs('00:00:00', 'HH:mm:ss').format(
                              'YYYY-MM-DD HH:mm:ss'
                            )),
                            (form.endTime = $dayjs('23:59:59', 'HH:mm:ss').format(
                              'YYYY-MM-DD HH:mm:ss'
                            ))
                          ),
                        },
                        {
                          label: '昨日',
                          value: () => (
                            (form.addTime = $dayjs('00:00:00', 'HH:mm:ss')
                              .subtract(1, 'day')
                              .format('YYYY-MM-DD HH:mm:ss')),
                            (form.endTime = $dayjs('23:59:59', 'HH:mm:ss')
                              .subtract(1, 'day')
                              .format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                        {
                          label: '七日',
                          value: () => (
                            (form.addTime = $dayjs('00:00:00', 'HH:mm:ss')
                              .subtract(6, 'day')
                              .format('YYYY-MM-DD HH:mm:ss')),
                            (form.endTime = $dayjs().format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                        {
                          label: '本月',
                          value: () => (
                            (form.addTime = $dayjs('01 00:00:00', 'DD HH:mm:ss').format(
                              'YYYY-MM-DD HH:mm:ss'
                            )),
                            (form.endTime = $dayjs().format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                        {
                          label: '上月',
                          value: () => (
                            (form.addTime = $dayjs(`01 00:00:00`, 'DD HH:mm:ss')
                              .subtract(1, 'month')
                              .format('YYYY-MM-DD HH:mm:ss')),
                            (form.endTime = $dayjs()
                              .subtract(1, 'month')
                              .endOf('month')
                              .format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                      ]"
                    />
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="endFlowRefreshTime" hide-label>
                    <a-date-picker
                      style="width: 100%"
                      v-model="form.endTime"
                      show-time
                      placeholder="请选择结束充值时间"
                      :time-picker-props="{ defaultValue: '12:00:00' }"
                      format="YYYY-MM-DD HH:mm:ss"
                      allow-clear
                      :shortcuts="[
                        {
                          label: '今日',
                          value: () => (
                            (form.addTime = $dayjs('00:00:00', 'HH:mm:ss').format(
                              'YYYY-MM-DD HH:mm:ss'
                            )),
                            (form.endTime = $dayjs('23:59:59', 'HH:mm:ss').format(
                              'YYYY-MM-DD HH:mm:ss'
                            ))
                          ),
                        },
                        {
                          label: '昨日',
                          value: () => (
                            (form.addTime = $dayjs('00:00:00', 'HH:mm:ss')
                              .subtract(1, 'day')
                              .format('YYYY-MM-DD HH:mm:ss')),
                            (form.endTime = $dayjs('23:59:59', 'HH:mm:ss')
                              .subtract(1, 'day')
                              .format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                        {
                          label: '七日',
                          value: () => (
                            (form.addTime = $dayjs('00:00:00', 'HH:mm:ss')
                              .subtract(6, 'day')
                              .format('YYYY-MM-DD HH:mm:ss')),
                            (form.endTime = $dayjs().format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                        {
                          label: '本月',
                          value: () => (
                            (form.addTime = $dayjs('01 00:00:00', 'DD HH:mm:ss').format(
                              'YYYY-MM-DD HH:mm:ss'
                            )),
                            (form.endTime = $dayjs().format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                        {
                          label: '上月',
                          value: () => (
                            (form.addTime = $dayjs(`01 00:00:00`, 'DD HH:mm:ss')
                              .subtract(1, 'month')
                              .format('YYYY-MM-DD HH:mm:ss')),
                            (form.endTime = $dayjs()
                              .subtract(1, 'month')
                              .endOf('month')
                              .format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                      ]"
                    />
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="addPaymentAmount" hide-label>
                    <a-input-group style="width: 100%">
                      <a-input
                        hide-button
                        v-model="form.addPaymentAmount"
                        placeholder="开始支付金额"
                      />
                      <a-input
                        hide-button
                        v-model="form.endPaymentAmount"
                        placeholder="结束支付金额"
                      />
                    </a-input-group>
                  </a-form-item>
                </a-col>
                <!-- <a-col :span="4">
                  <a-form-item field="addPayNumber" hide-label>
                    <a-input-group style="width: 100%">
                      <a-input hide-button v-model="form.addPayNumber" placeholder="开始充值次数" />
                      <a-input hide-button v-model="form.endPayNumber" placeholder="结束充值次数" />
                    </a-input-group>
                  </a-form-item>
                </a-col> -->
                <!-- <a-col :span="4">
                  <a-form-item field="addCost" hide-label>
                    <a-input-group style="width: 100%">
                      <a-input hide-button v-model="form.addCost" placeholder="开始订单成本" />
                      <a-input hide-button v-model="form.endCost" placeholder="结束订单成本" />
                    </a-input-group>
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="addProfit" hide-label>
                    <a-input-group style="width: 100%">
                      <a-input hide-button v-model="form.addProfit" placeholder="开始订单利润" />
                      <a-input hide-button v-model="form.endProfit" placeholder="结束订单利润" />
                    </a-input-group>
                  </a-form-item>
                </a-col> -->
              </a-row>
              <a-row>
                <a-col :span="4" :offset="20">
                  <a-form-item content-class=" flex justify-end" field="btns" hide-label>
                    <a-space :size="15">
                      <a-button type="primary" html-type="submit" @click="doRefresh(1)"
                        ><template #icon>
                          <icon-search />
                        </template>
                        <!-- Use the default slot to avoid extra spaces -->
                        <template #default>搜索</template></a-button
                      >
                      <a-button @click="reset"
                        ><template #icon>
                          <icon-sync theme="outline" size="14" />
                        </template>
                        <!-- Use the default slot to avoid extra spaces -->
                        <template #default>重置</template></a-button
                      >
                      <div style="color: #3491fa; cursor: pointer; width: 56px" @click="showFn"
                        >{{ text }}
                        <icon-down v-if="show == false" />
                        <icon-up v-else />
                      </div>
                    </a-space>
                  </a-form-item>
                </a-col>
              </a-row>
            </a-form>
          </template>
        </TableHeader>
      </template>
      <template #table-config>
        <a-space :size="15">
          <a-button @click="cardBalanceExports" type="outline">
            <!-- Use the default slot to avoid extra spaces -->
            <template #default>导出</template>
          </a-button>
        </a-space>
        <a-space :size="15">
          <TableConfig
            @update-border="onUpdateBorder"
            @update-striped="onUpdateStriped"
            @refresh="doRefresh"
          />
        </a-space>
      </template>
      <template #default>
        <a-table
          :loading="tableLoading"
          :bordered="{ wrapper: true, cell: tables.bordered }"
          :stripe="(tables.striped as boolean)"
          :data="table.dataList"
          :pagination="false"
          :row-key="rowKey"
          :row-class-name="rowClassNameFun"
          :scroll="{ x: 1500 }"
          :scrollbar="{ type: 'track', outerClass: '', outerStyle: '' }"
          @change="handleChange"
        >
          <template #columns>
            <a-table-column
              v-for="item of tableColumns.list"
              :key="item.key"
              align="left"
              :title="(item.title as string)"
              :width="item.width"
              :data-index="(item.key as string)"
              :fixed="item.fixed"
              :ellipsis="true"
              :tooltip="true"
              :sortable="item.sortable"
            >
              <template v-if="item.key === 'card'" #cell="{ record }">
                <div class="ba">
                  <img
                    v-if="record.payType === 0"
                    src="@/assets/order/y.jpg"
                    style="width: 16px; height: 16px; margin-right: 5px"
                    mode=""
                  />
                  <img
                    v-if="record.payType === 1"
                    src="@/assets/order/zf.png"
                    style="width: 16px; height: 16px; margin-right: 5px"
                    mode=""
                  />
                  <img
                    v-if="record.payType === 2"
                    src="@/assets/order/w.png"
                    style="width: 16px; height: 16px; margin-right: 5px"
                    mode=""
                  />
                  <img
                    v-if="record.payType === 3"
                    src="@/assets/order/j.jpg"
                    style="width: 16px; height: 16px; margin-right: 5px"
                    mode=""
                  />
                  <img
                    v-if="record.payType === 4"
                    src="@/assets/order/p.jpg"
                    style="width: 16px; height: 16px; margin-right: 5px"
                    mode=""
                  />
                  <img
                    v-if="record.payType === 5"
                    src="@/assets/order/zs.jpg"
                    style="width: 16px; height: 16px; margin-right: 5px"
                    mode=""
                  />
                  <span>{{ record.card.card }}</span>
                  <icon-copy
                    class="aa"
                    size="18"
                    style="color: #3491fa; padding-left: 5px"
                    @click="useCommon.copy(record.card.card)"
                  />

                  <icon-search
                    class="aa"
                    size="18"
                    style="color: #3491fa; padding-left: 5px"
                    @click="detailFn(record)"
                  />
                </div>
              </template>
              <template v-if="item.key === 'stateName'" #cell="{ record }">
                <a-tag color="blue" v-if="record.number == 1"
                  >首充 <span style="margin-top: 2px">{{ record.number }}</span>
                </a-tag>
                <a-tag color="green" v-else
                  >续充<span style="margin-top: 2px">{{ record.number }}</span></a-tag
                >
              </template>
              <template v-if="item.key === 'effectiveState'" #cell="{ record }">
                <a-tag color="blue" v-if="record.effectiveState == 0">立即生效</a-tag>
                <a-tag color="blue" v-else-if="record.effectiveState == 1">本月生效</a-tag>
                <a-tag color="blue" v-if="record.effectiveState == 2">次月生效</a-tag>
                <a-tag color="blue" v-else-if="record.effectiveState == 3">月底顺延</a-tag>
                <a-tag color="blue" v-if="record.effectiveState == 4">跨月顺延</a-tag>
              </template>
              <template v-if="item.key === 'effective'" #cell="{ record }">
                <a-tag color="red" v-if="record.effectiveType == 2">已失效</a-tag>
                <a-tag color="blue" v-else-if="record.effectiveType == 0">待生效</a-tag>
                <a-tag color="blue" v-else-if="record.effectiveType == 1">已生效</a-tag>
              </template>
              <template v-if="item.key === 'payAmount'" #cell="{ record }">
                {{ Math.floor((record.receivedAmount - record.giveAmount) * 100) / 100 }}
              </template>
              <template v-if="item.key === 'state'" #cell="{ record }">
                <a-tag color="red" v-if="record.state == 4">退款</a-tag>
                <a-tag color="blue" v-else-if="record.state == 3">失败</a-tag>
                <a-tag color="blue" v-else-if="record.state == 2">成功</a-tag>
                <a-tag color="blue" v-else-if="record.state == 1">进行</a-tag>
                <a-tag color="blue" v-else-if="record.state == 0">等待</a-tag>
                <a-tag color="blue" v-else-if="record.state == -1">删除</a-tag></template
              >
              <template v-else-if="item.key === 'payType'" #cell="{ record }">
                <div v-if="record.payType == 0"> 余额</div>
                <div v-if="record.payType == 1"> 支付宝</div>
                <div v-if="record.payType == 2"> 微信</div>
                <div v-if="record.payType == 3"> 接口</div>
                <div v-if="record.payType == 4"> 批量</div>
                <div v-if="detail.payType == 5"> 赠送</div>
              </template>
              <template v-else-if="item.key === 'remarks'" #cell="{ record }">
                <span v-if="record.remarks">{{ record.remarks }}</span>
                <span v-else>--- </span>
              </template>
              <template v-else-if="item.key === 'userName'" #cell="{ record }">
                <span v-if="record.user">{{ record.user.userName }}</span>
                <span v-else>管理员 </span>
              </template>
              <template v-else-if="item.key === 'actions'" #cell="{ record }">
                <a-space :size="2">
                  <a-button
                    style="padding: 0px 4px"
                    type="text"
                    size="small"
                    @click="detailFn(record)"
                    >详情</a-button
                  >
                </a-space>
              </template>
            </a-table-column>
          </template>
        </a-table>
        <div
          style="
            border: 1px solid rgba(229, 231, 235, var(--tw-border-opacity));
            border-top: 0;
            padding: 12px;
            text-align: left;
          "
          >统计：订单总金额:{{ total.amount }}元
          <span style="margin-left: 10px">支付金额: {{ total.payment_amount }}元</span>
        </div>
      </template>
      <template #footer>
        <TableFooter :pagination="pagination" />
      </template>
    </TableBody>

    <!-- 多卡搜索 -->
    <a-modal
      v-model:visible="cardsVisible"
      @before-close="colse"
      title="多条件搜索"
      width="400px"
      :mask-closable="false"
      title-align="start"
    >
      <a-textarea
        style="width: 100%"
        v-model="card"
        placeholder="请输入搜索条件，一行一个"
        allow-clear
      />
      <template #footer>
        <a-space>
          <a-button @click="cardsVisible = false">取消</a-button>
          <a-button type="primary" @click="cardsFn">确定</a-button>
        </a-space>
      </template>
    </a-modal>
    <!-- 详情 -->
    <a-modal
      v-model:visible="visible"
      :mask-closable="false"
      width="800px"
      title-align="start"
      title="订单详情"
    >
      <div>
        <a-descriptions :column="2" align="center" title="基础信息" bordered>
          <a-descriptions-item label="客户账号">{{ detail.user.userName }}</a-descriptions-item>
          <a-descriptions-item label="所属系列">{{
            detail.card.series.showName
          }}</a-descriptions-item>
          <a-descriptions-item label="套餐名称">{{ detail.setMealName }}</a-descriptions-item>
          <a-descriptions-item label="套餐类型">
            <span v-if="detail.setMealType == 0">无限叠加</span>
            <span v-else-if="detail.setMealType == 1">基础套餐</span>
            <span v-else-if="detail.setMealType == 2">叠加包</span>
            <!-- <span v-else-if="detail.setMealType == 3">体验包</span> -->
          </a-descriptions-item>
          <a-descriptions-item label="运营商">
            <div class="titleName" v-if="detail.card.series.operator == 0">中国移动 </div>
            <div class="titleName" v-if="detail.card.series.operator == 1">中国联通</div>
            <div class="titleName" v-if="detail.card.series.operator == 2">中国电信</div>
            <div class="titleName" v-if="detail.card.series.operator == 3"
              >中国广电</div
            ></a-descriptions-item
          >
          <a-descriptions-item label="套餐流量"
            ><span v-if="!detail.flowVirtual && !detail.flowReal"> 无限</span>
            <span v-else-if="detail.flowVirtual || (detail.flowReal && detail.flowVirtual)">{{
              detail.flowVirtual >= 1024
                ? Math.floor((detail.flowVirtual / 1024) * 100) / 100 + 'G'
                : Math.floor(detail.flowVirtual * 100) / 100 + 'M'
            }}</span>
            <span v-else-if="detail.flowReal">{{
              detail.flowReal >= 1024
                ? Math.floor((detail.flowReal / 1024) * 100) / 100 + 'G'
                : Math.floor(detail.flowReal * 100) / 100 + 'M'
            }}</span>
          </a-descriptions-item>
          <a-descriptions-item label="套餐周期"
            >{{ detail.validity }}{{ detail.validityType == 0 ? '天' : '月' }}</a-descriptions-item
          >
          <a-descriptions-item label="套餐金额">{{ detail.amount }}元</a-descriptions-item>
          <!-- <a-descriptions-item label="订单周期">{{ detail.card.series.name }}</a-descriptions-item> -->
          <a-descriptions-item label="订单时间">
            <a-tag color="blue" v-if="detail.effectiveState == 0">立即生效</a-tag>
            <a-tag color="blue" v-else-if="detail.effectiveState == 1">本月生效</a-tag>
            <a-tag color="blue" v-if="detail.effectiveState == 2">次月生效</a-tag>
            <a-tag color="blue" v-else-if="detail.effectiveState == 3">月底顺延</a-tag>
            <a-tag color="blue" v-if="detail.effectiveState == 4"
              >跨月顺延</a-tag
            ></a-descriptions-item
          >
          <a-descriptions-item label="订单状态">
            <a-tag color="red" v-if="detail.state == 4">退款</a-tag>
            <a-tag color="blue" v-else-if="detail.state == 3">失败</a-tag>
            <a-tag color="blue" v-else-if="detail.state == 2">成功</a-tag>
            <a-tag color="blue" v-else-if="detail.state == 1">进行</a-tag>
            <a-tag color="blue" v-else-if="detail.state == 0">等待</a-tag>
            <a-tag color="blue" v-else-if="detail.state == -1">删除</a-tag></a-descriptions-item
          >
          <a-descriptions-item label="订单类型">
            <a-tag color="blue" v-if="detail.number == 1">首充{{ detail.number }}</a-tag>
            <a-tag color="red" v-else>续充{{ detail.number }}</a-tag>
          </a-descriptions-item>
          <!-- <a-descriptions-item label="购买数量">{{ detail.quantity }} </a-descriptions-item> -->
          <!-- <a-descriptions-item label="生效次数">{{ detail.quantity }}</a-descriptions-item> -->
          <a-descriptions-item label="支付金额">{{ detail.paymentAmount }}元</a-descriptions-item>
          <!-- <a-descriptions-item label="订单成本">{{ detail.adminCost }}元</a-descriptions-item> -->
          <!-- <a-descriptions-item label="订单佣金">{{ detail.quantity }}元</a-descriptions-item> -->
          <!-- <a-descriptions-item label="订单利润"
            >{{ detail.profit }}元</a-descriptions-item
          > -->
        </a-descriptions>
        <a-descriptions
          style="margin-top: 20px"
          :column="2"
          align="center"
          title="支付信息"
          bordered
        >
          <a-descriptions-item label="充值途径"
            ><div v-if="detail.payType == 0"> 余额</div>
            <div v-if="detail.payType == 1"> 支付宝</div>
            <div v-if="detail.payType == 2"> 微信</div>
            <div v-if="detail.payType == 3"> 接口</div>
            <div v-if="detail.payType == 4"> 批量</div>
            <div v-if="detail.payType == 5"> 赠送</div></a-descriptions-item
          >
          <a-descriptions-item label="充值时间">{{ detail.createTime }}</a-descriptions-item>
          <a-descriptions-item label="成功时间">{{ detail.successTime }}</a-descriptions-item>
          <a-descriptions-item label="客户IP">{{ detail.ip }}</a-descriptions-item>
          <a-descriptions-item label="客户地址">{{ detail.ipAddress }}</a-descriptions-item>
          <a-descriptions-item label="支付名称">{{
            detail.payTemplate ? detail.payTemplate.name : '---'
          }}</a-descriptions-item>
          <a-descriptions-item label="支付商户号">{{
            detail.payTemplate ? detail.payTemplate.merchantNo : '---'
          }}</a-descriptions-item>
          <a-descriptions-item label="商户订单号">{{
            detail.outTradeNo ? detail.outTradeNo : '---'
          }}</a-descriptions-item>
          <a-descriptions-item label="支付订单号">{{
            detail.tradeNo ? detail.tradeNo : '---'
          }}</a-descriptions-item>
        </a-descriptions>
        <a-descriptions
          style="margin-top: 20px"
          :column="2"
          align="center"
          title="其他信息"
          bordered
        >
          <a-descriptions-item label="退款类型">
            <div v-if="detail.refundType == 0"> 手动退款</div>
            <div v-if="detail.refundType == 1"> 原路退回</div>
            <div v-if="detail.refundType == 2"> 余额退款</div>
            <div v-if="!detail.refundType">- - -</div></a-descriptions-item
          >
          <a-descriptions-item label="退款时间"
            >{{ detail.refundTime ? detail.refundTime : '- - -' }}
          </a-descriptions-item>
          <a-descriptions-item label="退款金额">{{
            detail.refundAmount ? detail.refundAmount + '元' : '- - -'
          }}</a-descriptions-item>
          <a-descriptions-item label="退款备注">{{
            detail.refundRemarks ? detail.refundRemarks : '- - -'
          }}</a-descriptions-item>
        </a-descriptions>
      </div>
      <template #footer>
        <a-space />
      </template>
    </a-modal>
  </div>
</template>

<script setup lang="ts">
  import { orderList, exportorderList, orderStatistics } from '@/api/user'
  import useCommonStore from '@/store/modules/common'
  import { usePagination, useRowKey, useTable } from '@/hooks/table'
  import { onMounted, reactive, ref } from 'vue'
  import { Message } from '@arco-design/web-vue'
  import { formpost, get } from '@/api/http'
  const pagination = usePagination(doRefresh)
  const rowKey = useRowKey('id')
  const table = useTable()
  const show: any = ref(false)
  const useCommon = useCommonStore()

  const series: any = ref([])
  const visible = ref(false)

  const card = ref('')
  const cardsVisible = ref(false)
  const ast = ref(0)

  const detail: any = ref({
    createTime: '2023-08-24 16:12:25',
    id: 1,
    outRefundNo: '20230824161227935011',
    outTradeNo: '20230824161208245823',
    payTemplate: { merchantType: 0, merchantNo: '2021004101656942' },
    payTemplateId: 16,
    paymentAmount: 0,
    receivedAmount: 0,
    refundAmount: 0,
    serviceCharge: 0,
    tradeNo: '2023082422001412911428476242',
    type: 0,
    user: { userName: 'user' },
    userId: 41,
    card: { series: { name: '执行程序', operator: 1, channel: { name: '迎梦云-老郭' } } },
  })
  const typeLists = ref([
    {
      name: '商户订单号',
      value: 'outTradeNo',
    },
    // {
    //   name: '支付订单号',
    //   value: 'tradeNo',
    // },
    {
      name: '客户下单IP',
      value: 'ip',
    },
  ])
  const type: any = ref('outTradeNo')
  const typeText: any = ref('')
  const userList: any = ref([])

  const loading = ref(false)
  const form = ref({
    addPayNumber: '',
    endPayNumber: '',
    addRefundTime: '',
    endRefundTime: '',
    cards: '', //卡号
    outTradeNo: '', // 商户订单号
    tradeNo: '', //支付订单号
    userIds: '', //客户ID
    channelIds: '', //渠道ID
    seriesIds: '', //系列ID
    setMealIds: '', //套餐ID
    setMealTypes: '', //套餐类型 0无限叠加1基础套餐 2叠加包 3体验包
    operators: '', //运营商 0中国移动 1中国联通 2中国电信 3中国广电
    payTypes: '', //支付类型 0余额 1支付宝 2微信 3接口 4批量
    adminCollection: '', // 收款类型 true管理员收款 false代理收款
    effectives: '', //生效状态 0立即生效 1本月生效 1次月生效 2月底顺延 3跨月顺延
    number: '', //充值次数
    states: '', //订单状态 0等待 1进行 2成功 3失败 4退款 -1删除
    payTemplateId: '', //支付模板ID
    firstCharge: '', // 是否首充true首充 false续充
    ip: '', //下单IP
    addTime: '', //开始充值时间
    endTime: '', //结束充值时间
    addPaymentAmount: '', //开始支付金额
    endPaymentAmount: '', // 结束支付金额
    addQuantity: '', //开始购买数量
    endQuantity: '', //结束购买数量
    addNumber: '', // 开始购买次数
    endNumber: '', //结束购买次数
    addCost: '', // 开始成本
    endCost: '', // 结束成本
    addProfit: '', //开始利润
    endProfit: '', //结束利润
    sort: '',
    asc: '',
  })
  function typeFn() {
    for (var key in form.value) {
      if (key !== type.value) {
        form.value[key] = ''
      }
    }
  }
  const tableLoading = ref(false)
  const tables = reactive({
    tableLoading: false,
    bordered: false,
    striped: false,
    expand: [1],
    isExpand: false,
  })
  const tableColumns: any = reactive({
    list: [
      {
        title: '客户账号',
        key: 'userName',
        dataIndex: 'userName',
        checked: true,
        width: 130,
      },
      {
        title: '卡号',
        key: 'card',
        dataIndex: 'card',
        checked: true,
        width: 252,
      },
      {
        title: '充值套餐',
        key: 'setMealName',
        dataIndex: 'setMealName',
        checked: true,
        width: 220,
      },
      {
        title: '充值时间',
        key: 'createTime',
        dataIndex: 'createTime',
        checked: true,
        width: 190,
      },
      {
        title: '支付金额',
        key: 'paymentAmount',
        dataIndex: 'paymentAmount',
        checked: true,
        width: 120,
        sortable: {
          sortDirections: ['ascend', 'descend'],
        },
      },

      {
        title: '充值途径',
        key: 'payType',
        dataIndex: 'payType',
        checked: true,
        width: 100,
      },

      {
        title: '订单状态',
        key: 'state',
        dataIndex: 'state',
        checked: true,
        width: 100,
      },
      {
        title: '生效状态',
        key: 'effective',
        dataIndex: 'effective',
        checked: true,
        width: 100,
      },
      {
        title: '订单时间',
        key: 'effectiveState',
        dataIndex: 'effectiveState',
        checked: true,
        width: 100,
      },
      {
        title: '订单类型',
        key: 'stateName',
        dataIndex: 'stateName',
        checked: true,
        width: 100,
      },
      // {
      //   title: '购买数量',
      //   key: 'quantity',
      //   dataIndex: 'quantity',
      //   checked: true,
      //   width: 100,
      // },
      // {
      //   title: '订单成本',
      //   key: 'adminCost',
      //   dataIndex: 'adminCost',
      //   checked: true,
      //   width: 100,
      // },

      // {
      //   title: '订单利润',
      //   key: 'profit',
      //   dataIndex: 'profit',
      //   checked: true,
      //   width: 100,
      // },
      {
        title: '订单备注',
        key: 'remarks',
        dataIndex: 'remarks',
        checked: true,
        width: 100,
      },
      {
        title: '操作',
        key: 'actions',
        fixed: 'right',
        dataIndex: 'actions',
        width: 80,
        align: 'center',
        checked: true,
      },
    ],
  })

  const reset = () => {
    form.value = {
      addPayNumber: '',
      endPayNumber: '',
      addRefundTime: '',
      endRefundTime: '',
      cards: '', //卡号
      outTradeNo: '', // 商户订单号
      tradeNo: '', //支付订单号
      userIds: '', //客户ID
      channelIds: '', //渠道ID
      seriesIds: '', //系列ID
      setMealIds: '', //套餐ID
      setMealTypes: '', //套餐类型 0无限叠加1基础套餐 2叠加包 3体验包
      operators: '', //运营商 0中国移动 1中国联通 2中国电信 3中国广电
      payTypes: '', //支付类型 0余额 1支付宝 2微信 3接口 4批量
      adminCollection: '', // 收款类型 true管理员收款 false代理收款
      effectives: '', //生效状态 0立即生效 1本月生效 1次月生效 2月底顺延 3跨月顺延
      number: '', //充值次数
      states: '', //订单状态 0等待 1进行 2成功 3失败 4退款 -1删除
      payTemplateId: '', //支付模板ID
      firstCharge: '', // 是否首充true首充 false续充
      ip: '', //下单IP
      addTime: '', //开始充值时间
      endTime: '', //结束充值时间
      addPaymentAmount: '', //开始支付金额
      endPaymentAmount: '', // 结束支付金额
      addQuantity: '', //开始购买数量
      endQuantity: '', //结束购买数量
      addNumber: '', // 开始购买次数
      endNumber: '', //结束购买次数
      addCost: '', // 开始成本
      endCost: '', // 结束成本
      addProfit: '', //开始利润
      endProfit: '', //结束利润
      sort: '',
      asc: '',
    }
    doRefresh(1)
  }

  //排序
  function handleChange(data, extra, currentDataSource) {
    if (extra.sorter) {
      form.value.sort = 'amount'
      if (extra.sorter.direction == 'ascend') {
        form.value.asc = true
      } else {
        form.value.asc = false
      }
    } else {
      form.value.sort = ''
      form.value.asc = ''
    }
    console.log('change', data, extra, currentDataSource)
    doRefresh(1)
  }

  const text: any = ref('展开')
  function showFn() {
    show.value = !show.value
    if (show.value == false) {
      text.value = '展开'
    } else {
      text.value = '收起'
    }
  }
  const total: any = ref({ amount: 0, profit: 0, rebate: 0 })
  function doRefresh(value?: number) {
    // eslint-disable-next-line prettier/prettier
    tableLoading.value = true
    if (value) {
      pagination.page = value
    }
    form.value[type.value] = typeText.value
    formpost({
      url: orderList,
      data: () => {
        return {
          page: pagination.page,
          size: pagination.pageSize,
          ...form.value,
          userIds: form.value.userIds.toString(),
          channelIds: form.value.channelIds.toString(),
          seriesIds: form.value.seriesIds.toString(),
          setMealIds: form.value.setMealIds.toString(),
          setMealTypes: form.value.setMealTypes.toString(),
          operators: form.value.operators.toString(),
          payTypes: form.value.payTypes.toString(),
          effectives: form.value.effectives.toString(),
          states: form.value.states.toString(),
        }
      },
    })
      .then((res) => {
        tableLoading.value = false
        table.handleSuccess(res.data.list)
        pagination.setTotalSize((res.data as any).totalSize)
        formpost({
          url: orderStatistics,
          data: () => {
            return {
              ...form.value,
              userIds: form.value.userIds.toString(),
              channelIds: form.value.channelIds.toString(),
              seriesIds: form.value.seriesIds.toString(),
              setMealIds: form.value.setMealIds.toString(),
              setMealTypes: form.value.setMealTypes.toString(),
              operators: form.value.operators.toString(),
              payTypes: form.value.payTypes.toString(),
              effectives: form.value.effectives.toString(),
              states: form.value.states.toString(),
            }
          },
        })
          .then((res) => {
            total.value = res.data
          })
          .catch(console.log)
      })
      .catch(console.log)
  }

  const colse = () => {
    ast.value = 0
    cardsVisible.value = false
  }
  const open = (val: any) => {
    ast.value = val
    cardsVisible.value = true
  }
  const cardBalanceExports = () => {
    loading.value = true
    form.value[type.value] = typeText.value
    useCommon
      .downLoadPosts(exportorderList, form.value, '卡板订单列表')
      .then(() => {
        loading.value = false
      })
      .catch(() => {
        loading.value = false
      })
  }

  function cardsFn() {
    const arr = card.value.split(/\n/g)
    if (ast.value == 0) {
      typeText.value = arr.toString()
    } else {
      form.value.cards = arr.toString()
    }
    cardsVisible.value = false
  }
  const detailFn = (val: any) => {
    detail.value = JSON.parse(JSON.stringify(val))
    visible.value = true
  }

  function rowClassNameFun(_record: any, index: number) {
    return index % 2 === 1 && table.striped.value ? 'table-striped' : null
  }

  const onUpdateBorder = (isBordered: boolean) => {
    tables.bordered = isBordered
  }
  function onUpdateStriped(isStriped: boolean) {
    tables.striped = isStriped
  }

  function getList() {
    useCommon.userListse().then((res: any) => {
      userList.value = res.data
    })
  }

  function getseries() {
    useCommon.userseriess().then((res: any) => {
      series.value = res.data
    })
  }
  const meal: any = ref([])
  function getMeal() {
    useCommon.usermealListFn().then((res: any) => {
      meal.value = res.data
    })
  }

  onMounted(async () => {
    await doRefresh()
    await getList()
    await getseries()
    await getMeal()
  })
</script>

<style lang="less" scoped>
  .hide {
    display: none;
  }
  .ba {
    display: flex;
    align-items: center;
    cursor: pointer;
    .aa {
      font-size: 18px;
      display: none;
    }
  }

  .ba:hover {
    cursor: pointer;
    .aa {
      font-size: 18px;
      display: block;
      width: 18px;
    }
  }
</style>
